<template>
 <div>
    <h1 >员工信息管理</h1>
   <el-form :inline="true" class="demo-form-inline" >
     <el-form-item label="员工姓名">
       <el-input v-model="studentQuery.empName"></el-input>
     </el-form-item>

     <el-form-item label="性别">
       <el-select v-model="studentQuery.sex">
         <el-option label="男"  value="男"></el-option>
         <el-option label="女"  value="女"></el-option>

       </el-select>
     </el-form-item>

     <el-form-item >
       <el-button type="success" @click="queryEmp">查询</el-button>
       <el-button type="success" @click="addPage">新增</el-button>
     </el-form-item>
   </el-form>


   <el-table border :data="list" style="width:100%">
     <el-table-column label="编号" prop="id"   width="100px"></el-table-column>
     <el-table-column label="姓名" prop="empName" ></el-table-column>
     <el-table-column label="性别" prop="sex"	></el-table-column>
     <el-table-column label="电话" prop="phone"	></el-table-column>
     <el-table-column label="职务" prop="job"	></el-table-column>
     <el-table-column>
       <template slot-scope="x">
         <el-button type="success" size="mini" @click="query(x.$index,x.row)">查看</el-button>
         <el-button type="warning" size="mini" @click="edit(x.$index,x.row)">编辑</el-button>
         <el-button type="danger" size="mini" @click="del(x.$index,x.row)">删除</el-button>
       </template>
     </el-table-column>
   </el-table>
   <!-- 分页组件 -->
   <div align="right">
     <el-pagination
       @size-change="selectChange"
       @current-change="pageChange"
       :current-page="form.page"
       :page-sizes="[5,10,15,20]"
       :page-size="form.row"
       :total="form.total"
       layout="sizes,prev,pager,next,jumper,total"
     ></el-pagination>
   </div>


   <!-- 编辑- 对话框组件 -->
   <el-dialog :visible.sync="isShow" width="30%" title="员工信息编辑">
     <el-form label-width="80px">

       <el-form-item label="员工姓名">
         <el-input v-model="updateForm.empName"></el-input>
       </el-form-item>

       <el-form-item label="电话">
         <el-input v-model="updateForm.phone"></el-input>
       </el-form-item>

       <el-form-item label="职务">
         <el-input v-model="updateForm.job"></el-input>
       </el-form-item>

       <el-form-item label="性别">
         <el-select v-model="updateForm.sex">
           <el-option label="男" value="男"></el-option>
           <el-option label="女" value="女"></el-option>
         </el-select>
       </el-form-item>



       <el-form-item >
         <el-button type="success" size="mini" @click="upateEmp">保存</el-button>
         <el-button type="success" size="mini">重置</el-button>
       </el-form-item>
     </el-form>
   </el-dialog>

   <!-- 新增- 对话框组件 -->
   <el-dialog :visible.sync="addShow" width="30%" title="员工信息新增">
     <el-form label-width="80px">
       <el-form-item label="员工姓名">
         <el-input v-model="addForm.empName"></el-input>
       </el-form-item>

       <el-form-item label="电话">
         <el-input v-model="addForm.phone"></el-input>
       </el-form-item>

       <el-form-item label="职务">
         <el-input v-model="addForm.job"></el-input>
       </el-form-item>

       <el-form-item label="性别">
         <el-select v-model="addForm.sex">
           <el-option label="男" value="男"></el-option>
           <el-option label="女" value="女"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item >
         <el-button type="success" size="mini" @click="saveEmp">保存</el-button>
         <el-button type="success" size="mini">重置</el-button>
       </el-form-item>
     </el-form>
   </el-dialog>


 </div>
</template>

<script>
    import {constructArgumentList} from "node-notifier/lib/utils";

    export default {
        name: "LIst",
        data(){  //数据.
          return{
            addForm:{  //定义新增员工的参数对象
              empName:"",
              sex:"",
              phone:"",
              job:""
            },
            updateForm:{  //定义编辑员工的参数对象
              id:"",  //修改条件
              empName:"",
              sex:"",
              phone:"",
              job:""
            },
            studentQuery:{  //定义的查询的参数.
              empName:"",
              sex:""
            },
            list:[],
            isShow:false, //编辑对话框是否显示
            isQuery:false,//详情对话框是否显示
            addShow:false,
            form:{
              id:"",
              name:"",
              xueli:"",
              age:"",
              birthday:"",
              page:1,//页码
              row:5,//每页显示条数
              total:10,//总条数
              totalPage:3//总页码
            },
          }
        },
      mounted() {  //生命周期函数
          this.queryEmp();
      },
      methods:{
        upateEmp(){
          //定义一个ajax请求
          const self = this;
          this.$http.get("/emp/update",{params:this.updateForm})
            .then(function (rs){
              console.log(rs.data);
              if(rs.data.code==200){
                //提示信息
                self.$message(rs.data.msg);
                //关闭修改的弹窗
                self.isShow = false;
                //查询
                self.queryEmp();
              }else{
                //提示信息
                self.$message(rs.data.msg);
              }
            })
        },
          saveEmp(){  //新增员工
            //定义一个ajax请求
            const self = this;
            this.$http.get("/emp/add",{params:this.addForm})
            .then(function (rs){
              console.log(rs.data);
              if(rs.data.code==200){
                //提示信息
                self.$message(rs.data.msg);
                //关闭新增的弹窗
                self.addShow = false;
                //查询
                self.queryEmp();
              }else{
                //提示信息
                self.$message(rs.data.msg);
              }
            })
          },
          queryEmp(){  //定义查询函数.
            //定义一个ajax请求.
            const self = this;
            this.$http.get("/emp/query",{params:this.studentQuery})
              .then(function (rs){
                //打印控制台数据.
                console.log(rs.data);
                if(rs.data.code==200){
                  self.list = rs.data.data;
                }else{
                  //清空.
                  self.list = []
                }
              })
          },
        edit:function(index,x){
          this.isShow = true;
          //数据回显
          this.updateForm = x;
        },
        del:function(inde,x){
          //把vue对象赋值给一个变量
          var self  = this;

          //2 完整写法
          this.$confirm("你确定要删除吗?","删除提示",{
            confirmButtonText:"确定删除",
            cancelButtonText:"取消删除",
            type:"warning"
          }).then(function(){
            //发送ajax请求
            const delForm = {"id":x.id};
            self.$http.get("/emp/del",{params:delForm})
            .then(function (rs){
              console.log(rs.data);
              if(rs.data.code == 200){
                self.$message(rs.data.msg);
                //查询
                self.queryEmp(rs.data.msg);
              }
            })
          }).catch(function(){
            //消息提示
            self.$message({
              message:"删除失败",
              type:"error"
            })
          })

        },
        query:function(index,x){

          this.isQuery = true;
          this.form= x;
        },
        addPage:function(){
          this.addShow = true;
        },
        selectChange:function(val){//分页下拉框触发的事件,val下拉框选中条数
          //把选中的每页条数赋值给分页参数对象的每页条数
          this.form.row = val;
          //调用后端的查询方法
        },
        pageChange:function(page){//选中页码触发的事件,page值选中的页码
          this.form.page=page;
          //调用后端的查询方法
        }
      }
    }
</script>

<style scoped>

</style>
